<template>
	<view class="container">
		<mtitles :showBack="false" title="炖大侠" bgColor="none"></mtitles>
		<!-- <view :style="{height:`${state.customBar}px`}"></view> -->
		<view class="topSec" :style="{paddingTop:`${state.customBar}px`}">
			<view class="padding-top">
				<tb-advSwiper :list="state.list" :radius="20" :paddinglr="'0 36rpx'" :height="280"></tb-advSwiper>
			</view>
		</view>
		<view class="flex flex-wrap navBox lh_z">
			<view v-for="(item,index) in state.navList" :key="index" :id="'id'+index" :data-nid="index"  @click="tapNavItem(item)" class="d_ib">
				<view class="navItem text-center flex flex-direction justify-center p_rlt">
					<view class="">
						<view class="d_ib icoBox text-acenter">
							<image class="icoimg" :src="env.FileUrl+item.src" mode="aspectFit"></image>
						</view>
					</view>
					<view class="nvtext text-lg">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="p_rlt margin-top">
			<tb-image width="100%" height="276rpx" :src="env.FileUrl + 'food/images/home_bn01.png'"></tb-image>
			<view class="nadm_cont padding-tb padding-lr text-center">
				<view class="nad_tit text-white text-sm">
					我的折扣额
				</view>
				<view class="nadtext flex justify-center align-center margin-top-sm">
					<text class="d_ib p_rlt nad_line lef"></text>
					<text class="d_ib padding-lr-xs">累计总额</text>
					<text class="d_ib p_rlt nad_line"></text>
				</view>
				<view class="flex align-center">
					<view class="d_ib text-bold text-nred text48">
						30000
					</view>
					<view class="d_ib text-xs margin-left-xxs">
						<view class="text-nred">
							内
						</view>
						<view class="text-c6">
							元
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="text-lg text-bold padding-top-sm padding-left">
			大家都在吃
		</view>
		<view class="">
			<view class="d_ib lsItem" v-for="(item,index) in 6" :key="index">
				<tb-image width="100%" height="352rpx" borderRadius="20rpx 20rpx 0 0" :src="env.FileUrl + 'food/images/home/home_img01.png'"></tb-image>
				<view class="itm_cont bg-white">
					<view class="itm_txt">
						脆爽开胃，下饭一绝..
					</view>
					<view class="flex align-center text-c6 margin-top-xs">
						<view class="flex-sub flex align-center">
							<view class="flex-sub padding-tb-sm flex align-center padding-left-xs">
								<text class="fcon-a-Frame427320609"></text>
								<view class="flex-sub text-center">140</view>
							</view>
							<view class="flex-sub padding-tb-sm flex align-center">
								<text class="fcon-zan1 text-xl"></text>
								<view class="flex-sub text-center">1000</view>
							</view>
						</view>
						<view class="d_ib padding-lr-sm padding-tb-xs p_rlt lefsld">
							<text class="fcon-cai1 text-xl"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="botSec flex align-center lh_z">
			<view class="padding-left-xl flex-sub">
				<view class="text-xll text-bold text-ngold">
					7天瘦瘦套餐服务中
				</view>
				<view class="texta7 text-sm margin-top-xxs">
					已用餐5次，剩余2次
				</view>
			</view>
			<view class="bs_btn">
				去预约点餐
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	/**
	 * 模板1
	 * @property {String} title 标题文字
	 */
	import { computed,onMounted, reactive } from 'vue';
	import {env} from '@/api/env.js'
	const props = defineProps({
		title: {
			type: String,
			default: ''
		}
	});
	
	let state = reactive({
		list: [
			{
				src:'food/images/home_swiper01.png',
				url:''
			},
			{
				src:'food/images/home_swiper01.png',
				url:''
			}
		],
		statusBar: 0,
		customBar: 0,
		navList:[
			{
				name:'充值中心',
				src:'food/images/home_nav01.png',
				url:''
			},
			{
				name:'预定专区',
				src:'food/images/home_nav02.png',
				url:''
			},
			{
				name:'健康商城',
				src:'food/images/home_nav03.png',
				url:''
			},
			{
				name:'分享有礼',
				src:'food/images/home_nav04.png',
				url:''
			},
			{
				name:'品牌故事',
				src:'food/images/home_nav05.png',
				url:''
			}
		]
	});
	
	onMounted(() => {
		uni.getSystemInfo({
			success: function (e) {
				// #ifndef MP
				state.statusBar = Number(e.statusBarHeight);
				if (e.platform == 'android') {
					state.customBar = Number(e.statusBarHeight) + 50;
				} else {
					state.customBar = Number(e.statusBarHeight) + 45;
				}
				// #endif
				// #ifdef MP-WEIXIN
				state.statusBar = Number(e.statusBarHeight);
				let custom = wx.getMenuButtonBoundingClientRect();
				state.customBar = custom.bottom + custom.top - Number(e.statusBarHeight);
				// #endif
				// #ifdef MP-ALIPAY
				state.statusBar = Number(e.statusBarHeight);
				state.customBar = Number(e.statusBarHeight) + Number(e.titleBarHeight);
				// #endif
			}
		});
	});
	// let emit = defineEmits([
	//   "change"
	// ]);
	// const onChange = type => {
	// 	emit('change', type)
	// };
	
	// ====>old
	// export default {
	// 	name: 'homeModal1',
	// 	emits: ['change'],
	// 	props: {
	// 		title: {
	// 			type: String,
	// 			default: ''
	// 		}
	// 	},
	// 	methods: {
	// 		onChange(type) {
	// 			this.$emit('change', type)
	// 		}
	// 	}
	// }
</script>

<style lang="scss">
	.container{
		background: #F8F8F8;
	}
	.topSec{
		width: 100vw;
		min-height: 460rpx;
		background: linear-gradient(164deg, #09EC8D -57.6%, #FFF 62.77%);
		box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.06);
	
		
	}
	.navBox{
		padding-left: 13rpx;
	}
	.navItem{
		width: 145rpx;//142
		min-height: 140rpx;
		// &.lg{
		// 	width: 172rpx;
		// 	min-height: 160rpx;
		// }
		.icoimg{
			width: 120rpx;
			height: 120rpx;
			font-size: 0;
		}
		.nvtext{
			margin-top: -8rpx;
		}
	}
	.nadm_cont{
		@include baseab(232rpx,232rpx,3);
		left: 52rpx;
		top: 0;
		// background: #09EC8D;
		.nad_tit{
			@include centBox(100%,46rpx);
			background: #FF453E;
			border-radius: 46rpx;
		}
		
	}
	.nadtext{
		margin-top: 3rpx;
	}
	.nad_line{
		height: 4rpx;
		width: 1px;
		&:before{
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			@include baseab(46rpx,4rpx);
			background: linear-gradient(90deg, #FF9B94 0%, rgba(255, 255, 255, 0.00) 100%);
		}
		
		&.lef{
			&:before{
				left: auto;
				right: 0;
				background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #FF9B94 100%);
			}
		}
	}
	.text48{
		font-size: 48rpx;
	}
	.lsItem{
		width: calc(((100vw - 90rpx)/2));//320
		min-height: 492rpx;
		border-radius: 20rpx;
		margin: 20rpx 0 0 30rpx;
		.itm_cont{
			min-height: calc(492rpx - 352rpx);
			border-radius:0 0 20rpx 20rpx;
		}
		
	}
	.lefsld{
		&:before{
			content: '';
			@include baseab(2rpx,36rpx);
			left: 0;
			top: 0;
			background: rgba(153, 153, 153, 0.2);
		}
		
	}
	.itm_txt{
		padding: 20rpx 16rpx 0 16rpx;
		min-height: 56rpx;
	}
	.botSec{
		position: fixed;
		left: 30rpx;
		bottom: 26rpx;
		z-index: 3;
		width: calc(100vw - 60rpx);
		height: 110rpx;
		border-radius: 60rpx;
		border: 1px solid #9F9664;
		background: #343333;
		.texta7{
			color: #A7A8B7;
		}
		.bs_btn{
			@include centBox(196rpx,60rpx);
			border-radius: 60rpx;
			background: #F7D06E;
			margin-right: 24rpx;
			
		}
	}
</style>
